<template>
	<div class="role" v-if="dialogFormVisible">
		<el-dialog :title="title" :visible="dialogFormVisible" :close-on-click-modal="false" width="800px" :before-close="handleClose">
			<div class="tab">
				<el-form ref="form" :rules="rules" :model="form" label-width="100px">
					<el-form-item label="设备名称" prop="name">
						<el-input v-model="form.name" placeholder="请输入设备名称" :disabled="num == 3"></el-input>
					</el-form-item>
					<el-form-item label="设备型号" prop="model">
						<el-input v-model="form.model" placeholder="请输入设备型号" :disabled="num == 3"></el-input>
					</el-form-item>
					<el-form-item label="设备类型" prop="type">
						<el-select v-model="form.type" placeholder="请选择位置" style="width:100%;" :disabled="num == 3">
							<el-option
								v-for="item in customerOptions"
								:key="item.index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="位置" prop="localtion">
						<el-select v-model="form.localtion" placeholder="请选择位置" style="width:100%;" :disabled="num == 3">
							<el-option
								v-for="item in localtionOptions"
								:key="item.index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="购入时间" prop="buy_time">
						<el-date-picker
							style="width: 100%;"
							v-model="form.buy_time"
							type="datetime"
							:disabled="num == 3"
							placeholder="请选择购入时间"
							default-time="09:00:00">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="品牌" prop="manufactor">
						<el-input v-model="form.manufactor" placeholder="请输入品牌" :disabled="num == 3"></el-input>
					</el-form-item>

					<el-form-item label="备注" prop="remark">
						<el-input v-model="form.remark" :rows="6" type="textarea" placeholder="请输入备注" :disabled="num == 3"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
				<el-button type="primary" @click="add('form')" v-if="num != 3">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import moment from "moment"
import { deviceIdPost, devicePost, deviceOptions } from '@/api/user'
export default {
	name: 'addForm',
	data(){
		return {
			dialogFormVisible:false,
			form:{
				name:'',
			},
			id:'',
			rules:{
				name: [
					{max: 36, message: '设备名称不能超过36个字符', trigger: 'blur'},
					{ required: true, message: '请输入设备名称', trigger: 'blur' }
				],
				model:[
					{max: 36, message: '设备型号不能超过36个字符', trigger: 'blur'},
					{ required: true, message: '请输入设备型号', trigger: 'blur' }
				],
				type:[
					{ required: true, message: '请输入硬件版本', trigger: 'blur' }
				],
				manufactor:[{max: 36, message: '品牌不能超过36个字符', trigger: 'blur'},],
				remark:[{max: 300, message: '备注不能超过300个字符', trigger: 'blur'},],
				localtion:{required: true,message: '请选择位置',trigger: 'change'},
				buy_time:{required: true,message: '请选择购入时间',trigger: 'change'}
			},
			num:0,
			title:'新增',
			customerOptions:[],
			localtionOptions:[],
			deviceList:[]
		}
	},
	created() {

	},
	methods:{
		handleClose(){
			this.dialogFormVisible = false
			this.form = {}
			this.customerOptions=[]
			this.localtionOptions=[]
			this.deviceList=[]
		},
		getTime(data){
			var d = new Date(data);
			var d2 = d.getTime() - 8 * 60 * 60 * 1000
			d = new Date(d2)
			var  resDate = d.getFullYear() + '-' +
				((d.getMonth() + 1)<10?'0'+(d.getMonth() + 1):(d.getMonth() + 1)) + '-' +
				(d.getDate()<10?'0'+d.getDate():d.getDate())+ ' '+
				(d.getHours()<10?'0'+d.getHours():d.getHours())+':'+
				(d.getMinutes()<10?'0'+d.getMinutes():d.getMinutes())+':'+
				(d.getSeconds()<10?'0'+d.getSeconds():d.getSeconds());

			return resDate
		},
		add(form){
			this.$refs[form].validate((valid) => {
				if (valid) {
					if(this.num == 1){
						var data = this.form
						this.form.buy_time = moment(this.form.buy_time).format('YYYY-MM-DD HH:mm:ss')
						console.log(data,454545)
						devicePost(data).then(res => {
							if(res.status == 'success'){
								this.dialogFormVisible = false
								this.$message.success(res.message)
								this.form = {}
								this.$parent.initTable()
							}
							console.log(res,121212)
						})

						this.customerOptions=[]
						this.localtionOptions=[]
						this.deviceList=[]
					}
					if(this.num == 2){
						var data = {
							name:this.form.name,
							model:this.form.model,
							type:this.form.type,
							localtion:this.form.localtion,
							manufactor:this.form.manufactor,
							buy_time:moment(this.form.buy_time).format('YYYY-MM-DD HH:mm:ss')
						}
						deviceIdPost(data,this.id).then(res => {
							if(res.status == 'success'){
								this.dialogFormVisible = false
								this.$message.success(res.message)
								this.form = {}
								this.$parent.initTable()
							}else {
								this.dialogFormVisible = false
								this.form = {}
								this.$message.error(res.message)
							}
							console.log(res,12112)
						})
						this.customerOptions=[]
						this.localtionOptions=[]
						this.deviceList=[]
					}
				} else {
					return false;
				}
			});

		},
		initData(num,data){
			this.num = num
			if(data){
				this.id = data.id
			}
			deviceOptions().then(res => {
				res.data.device_type_list.filter(item => {
					this.customerOptions.push({name:item})
				})
				res.data.localtion_list.filter(item => {
					this.localtionOptions.push({name:item})
				})
				console.log(res,454545)
			})
			if(num == 1){
				this.title = '新增'
			}
			if(num == 2){
				this.title = '编辑'
				this.form = Object.assign({},data)
				this.form.buy_time = this.getTime(this.form.buy_time)
			}
			if(num == 3){
				this.title = '查看'
				this.form = Object.assign({},data)
				this.form.buy_time = this.getTime(this.form.buy_time)
			}
		}
	}

}
</script>

<style lang="scss" scoped>
.role{
	//.tab{
	//	width: 450px;
	//	margin: 0 0 0 40px;
	//}
}
</style>
